iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
1
Modern Web

使用 Modern Web 技術來打造 Chat App系列 第 14

Day 14:彈性的極致 - Imagemap 與 Flex

  • 分享至 

  • xImage
  •  

若要介紹一個 LINE 跟其他平台比較不一樣的地方,我肯定會挑 Imagemap 與 Flex 這兩個訊息的類型。這兩類的訊息是我目前沒有在其他平台上看到的,除了可以客製化你的 UI 到一個程度、把東西用的漂漂亮亮的,同時也可以有很細緻的點擊操作的效果。

但當然這一切的好處都是有成本的,要維護的程式碼行數跟複雜度也跟你的 UI 是成正比的,這也是必須要在 Server 上寫 UI 的 Chatbot 工程師必須了解與做好心理準備的。

就讓我們來看看今天的重頭戲「Imagemap」跟「Flex」吧。

Imagemap Message

Imagemap 就是把一張圖片分割成多個可點擊的區塊,因為可以自由的使用長寬跟 x、y 起始位置來去指定點擊位置,通常可以配圖片做出蠻神奇的效果。例如以前我曾經做過的,自己劃一個按鈕的位置然後設計成可以點:

https://ithelp.ithome.com.tw/upload/images/20190929/20103630fLcnhjIaWF.png

這個做法雖然對使用者、設計師很友善,但對開發者來說蠻辛苦的,除了可能需要動態產生圖片放到一個可以公開存取的地方,還需要去計算 x、y 軸跟寬高,蠻辛苦的。

來看一下程式範例吧:

await context.sendImagemap('This is an imagemap', {
  baseUrl: 'https://example.com/bot/images/rm001',
  baseSize: {
    width: 1040,
    height: 1040,
  },
  actions: [
    {
      type: 'uri',
      linkUri: 'https://example.com/',
      area: {
        x: 0,
        y: 586,
        width: 520,
        height: 454,
      },
    },
    {
      type: 'message',
      text: 'Hello',
      area: {
        x: 520,
        y: 586,
        width: 520,
        height: 454,
      },
    },
  ],
});

actions 的部分就是要提供 xywidthheight 來計算點擊區域,但這邊有點神秘的是只有 urimessage 兩種 type,沒有之前可以用來送出 Payload 的 Postback。

另一個有點神秘的地方是 baseUrl 的用法,LINE 會用 baseUrl/{image width} 這個格式當網址根據不同的裝置去要 240、300、460、700、1040px 的圖片。沒有打算要對裝置優化的話可以在網址最後端加上 #? 來取巧。

Flex Message

我個人覺得算長寬跟 x、y 起始位置還蠻沒有效率的,或是說開發、維護上很不方便,所以 Flex Message 對我來說就是相對更好用的東西,它可以用來呈現很多元的介面:

https://ithelp.ithome.com.tw/upload/images/20190929/20103630oyjVtLk93z.png

要做的這樣看起來已經都快要可以批敵網頁的程度了,讓我們首先來看看官網範例的「Hello, World!」怎麼做:

await context.sendFlex({
  type: 'bubble', // ①
  body: { // ②
    type: 'box', 
    layout: 'horizontal', // ③
    contents: [ 
      {
        type: 'text', // ④
        text: 'Hello,'
      },
      {
        type: 'text', // ④
        text: 'World!'
      }
    ]
  }
});

會長這個樣子:

https://ithelp.ithome.com.tw/upload/images/20190929/20103630jFDzPOBWXr.png

來解釋一下整個結構是怎麼一回事:

① 最外層的 Container 有 bubblecarousel之分,Bubble 是一個 Item,Carousel 則有多個 Item

(下面這張就是 Carousel)

https://ithelp.ithome.com.tw/upload/images/20190929/20103630g952YKzYM5.png

② 一個 Bubble 可以有 headerherobodyfooter 等等部分,都可以是一個 box

https://ithelp.ithome.com.tw/upload/images/20190929/201036300cAzxStM6c.png

layout 是排列的方向,有 horizontalverticalbaseline 三種,而這邊是 horizontal 水平台列
④ 在 contents 裡面放 Hello,World! 兩個 text

才一個 Hello, World! 就這麼複雜?

沒錯...

而且除了 Text,還有許多不同的 Component 可以使用:

  • Box
  • Button
  • Image
  • Icon
  • Span
  • Separator
  • Filler

太多了,這邊隨便舉幾個範例:

這是 Button:

{
  type: 'button',
  style: 'primary',
  action: {
    type: 'uri',
    label: 'Primary style button',
    uri: 'https://example.com',
  },
}

https://ithelp.ithome.com.tw/upload/images/20190929/20103630GegPatcci3.png

這是 Image:

{
  type: 'image',
  url: 'https://example.com/flex/images/image.jpg',
  size: 'md',
}

https://ithelp.ithome.com.tw/upload/images/20190929/20103630UIeGTrNDZJ.png

而且這太多樣式的東西可以調了,一時半刻也講不完,要用到時再去看文件就好。

LINE 有提供一個 Flex 的模擬器,蠻方便的,可以在寫程式先先模擬看看樣子:

https://developers.line.biz/console/fx/

結語

在面對使用者時,我們應該思考使用者需要的是什麼東西,也不用說一定要用 Imagemap、Flex 才能解決問題,但若能提供比較好的使用體驗,使用上也不用猶豫。


上一篇
Day 13:LINE 的事件處理基礎
下一篇
Day 15:機器人亂入下的「多人對話」、「群組聊天」
系列文
使用 Modern Web 技術來打造 Chat App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
NiJia
iT邦新手 5 級 ‧ 2019-10-08 17:23:16

組 flex message 超痛苦XD

RenZhou iT邦新手 4 級 ‧ 2019-10-08 17:30:19 檢舉

推模擬器beta flex message輕鬆組

我要留言

立即登入留言